<!doctype html>
<html>
 <head>
 <meta charset="utf-8">
 <title>Mouse Events</title>
 <link rel="stylesheet" href="style.css">
 </head>
 <body>
 <canvas id="canvas" width="400" height="400"></canvas>
 <textarea id="log"></textarea>
 <script src="utils.js"></script>
 <script src="ball.js"></script>
 <script>
 window.onload = function () {
 var canvas = document.getElementById('canvas'),
 context = canvas.getContext('2d'),
 mouse = utils.captureMouse(canvas),
 log = document.getElementById('log'),
 ball = new Ball();

 ball.x = canvas.width / 2;
 ball.y = canvas.height / 2;
 ball.draw(context);

 canvas.addEventListener('mousedown', function () {
 if (utils.containsPoint(ball.getBounds(), mouse.x, mouse.y)) {
 log.value = "in ball: mousedown";
 } else {
 log.value = "canvas: mousedown";
 }
 }, false);

 canvas.addEventListener('mouseup', function () {
 if (utils.containsPoint(ball.getBounds(), mouse.x, mouse.y)) {
 log.value = "in ball: mouseup";
 } else {
 log.value = "canvas: mouseup";
 }
 }, false);

 canvas.addEventListener('mousemove', function () {
 if (utils.containsPoint(ball.getBounds(), mouse.x, mouse.y)) {
 log.value = "in ball: mousemove";
 } else {
 log.value = "canvas: mousemove";
 }
 }, false);
 };
 </script>
 </body>
</html>